﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery可展开收缩三级下拉菜单代码 - 站长素材</title>
<style type="text/css">
*{margin: 0;padding: 0}
body{font-size: 12px;font-family: "宋体","微软雅黑";}
ul,li{list-style: none;}
a:link,a:visited{text-decoration: none;}
.list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;}
.list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;}
.list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;
}
.list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;}
.list ul li .inactives{background:url(images/on.png) no-repeat 184px center;} 
.list ul li ul{display: none;}
.list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;}
.list ul li ul li ul{display: none;}
.list ul li ul li a{ padding-left:20px;}
.list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; }
.last{ background-color:#d6e6f1; border-color:#6196bb; }
.list ul li ul li ul li a{ color:#316a91; padding-left:30px;}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.inactive').click(function(){
		if($(this).siblings('ul').css('display')=='none'){
			$(this).parent('li').siblings('li').removeClass('inactive');
			$(this).addClass('inactives');
			$(this).siblings('ul').slideDown(100).children('li');
			if($('ul').css('display')=='block'){
				$(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
				$(this).parents('li').siblings('li').children('ul').slideUp(100);

			}
		}else{
			//控制自身变成+号
			$(this).removeClass('inactives');
			//控制自身菜单下子菜单隐藏
			$(this).siblings('ul').slideUp(100);
			//控制自身子菜单变成+号
			$(this).siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives');
			//控制自身菜单下子菜单隐藏
			$(this).siblings('ul').children('li').children('ul').slideUp(100);

			//控制同级菜单只保持一个是展开的（-号显示）
			$(this).siblings('ul').children('li').children('a').removeClass('inactives');
		}
	})
});
</script>
</head>
<body>
<?php require 'tree.php';
?>
<div class="list">
   <ul class="yiji">


        <?php
      static $a=0;
        foreach ($arr as $v){
            if($v[3]>$a)
            {
                $a=$v[3];
                if(exist_son($v[0],$arr)&&$v[3]==1)
                    echo '<li>','<a href="#" class="inactive">',$v[1],'</a>','<ul style="display: none">';
                elseif(exist_son($v[0],$arr)&&$v[3]==2)
                    echo '<li>','<a href="#" class="inactive active">',$v[1],'</a>','<ul style="display: none">';
                else
                    echo '<li>','<a href="#">',$v[1],'</a>','</li>';
            }
            elseif($v[3]<$a)
            {
                $a=$v[3];
                if(exist_son($v[0],$arr)&&$v[3]==1)
                    echo '</ul>','</li>','<li>','<a href="#" class="inactive">',$v[1],'</a>','<ul style="display: none">';
                elseif(exist_son($v[0],$arr)&&$v[3]==2)
                    echo '</ul>','</li>','<li>','<a href="#" class="inactive active">',$v[1],'</a>','<ul>';

                else
                    echo '</ul>','</li>','<li>','<a href="#">',$v[1],'</a>','</li>';
            }
            else {
                if(exist_son($v[0],$arr)&&$v[3]==1)
                    echo '<li>','<a href="#" class="inactive">',$v[1],'</a>','<ul style="display: none">';
                elseif(exist_son($v[0],$arr)&&$v[3]==2)
                    echo '<li>','<a href="#" class="inactive active">',$v[1],'</a>','<ul style="display: none">';
                else
                    echo '<li>', '<a href="#">', $v[1], '</a>', '</li>';
            }
        }

        ?>
    </ul>
    </li>
    </ul>
<!--ul class="yiji">
	    <li><a href="#" class="inactive">中国美协章程</a>
            <ul style="display: none">
                <li><a href="#">办公室</a></li>
            </ul>
        </li>
		<li><a href="#" class="inactive">团体会员</a>
			<ul style="display: none">
				<li><a href="#" c   lass="inactive active">美协机关</a>
                    <ul style="display: none">
						<li><a href="#">办公室</a></li>
						<li><a href="#">人事处</a></li>
						<li><a href="#">组联部</a></li>
						<li><a href="#">外联部</a></li>
						<li><a href="#">研究部</a></li>
						<li><a href="#">维权办</a></li>
					</ul>
				</li>
				<li class="last"><a href="#">《美术》杂志社</a></li>
			</ul>
		</li>
		<li><a href="#" class="inactive">组织机构</a>
			<ul style="display: none">
				<li><a href="#" class="inactive active">美协机关</a>
                    <ul style="display: none">
						<li><a href="#">办公室</a></li>
						<li><a href="#">人事处</a></li>
						<li><a href="#">组联部</a></li>
						<li><a href="#">外联部</a></li>
						<li><a href="#">研究部</a></li>
						<li><a href="#">维权办</a></li>
					</ul>
				</li>
				<li><a href="#" class="inactive active">中国文联美术艺术中心</a>
					<ul>
						<li><a href="#">综合部</a></li>
						<li><a href="#">大型活动部</a></li>
						<li><a href="#">展览部</a></li>
						<li><a href="#">艺委会工作部</a></li>
						<li><a href="#">信息资源部</a></li>
						<li><a href="#">双年展办公室</a></li>
					</ul>
				</li>
				<li class="last"><a href="#">《美术》杂志社</a></li>
			</ul>
		</li>
	</ul>-->
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
